<template>

  <div>
    <el-container style="height: 900px; border: 1px solid #0b8ba5">
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu :default-openeds="['1', '3']">


          <el-submenu index="3">
            <template slot="title"><i class="el-icon-setting"></i>管理</template>

            <el-menu-item-group title="管理信息">
              <el-menu-item index="3-3">
                <router-link to="/household">住户管理</router-link>
              </el-menu-item>

            </el-menu-item-group>
            <el-submenu index="3-4">
              <template slot="title">员工管理</template>

              <el-menu-item index="3-4-1">
                <router-link to="/emp">员工信息管理</router-link>
              </el-menu-item>
              <el-menu-item index="3-4-2">
                <router-link to="/dept">员工部门管理</router-link>
              </el-menu-item>
            </el-submenu>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header
          style="text-align: left; font-size: 40px;color: #cbf1f5;background-image: linear-gradient(to right, #acb6e5 , #86fde8 );">
          <div> 智慧园区&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
            &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
            人员管理系统
          </div>


        </el-header>

        <el-main>

          <el-form :inline="true" :model="searchForm" class="demo-form-inline" size="small">
            <el-form-item label="姓名">
              <el-input v-model="searchForm.name" placeholder="姓名"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-select v-model="searchForm.sex" placeholder="性别" label-width="10px">

                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="部门">
              <el-input v-model="searchForm.where" placeholder="部门"></el-input>
            </el-form-item>

            <el-button type="primary" @click="onsearch" label-position="left" label-width='50px' size="small">查询
            </el-button>
            <el-button type="primary" @click="dialogFormadd = true">添加员工</el-button>

            <el-dialog
              title="添加员工"
              :visible="dialogFormadd"
              @close="dialogFormadd = false"
              v-show="dialogFormadd"
              class="no-transition"
            >
              <el-form :model="form" label-width="80px">
                <el-form-item label="姓名">
                  <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="部门">
                  <el-input v-model="form.where" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="入职日期">
                  <el-date-picker v-model="form.date"
                                  value-format="yyyy-MM-dd" type="date" placeholder="选择日期"
                                  :format="datePickerFormat"></el-date-picker>
                </el-form-item>
                <el-form-item label="性别">
                  <el-select v-model="form.sex" placeholder="请选择性别">
                    <el-option label="男" value="1"></el-option>
                    <el-option label="女" value="2"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormadd = false">取消</el-button>
                <el-button type="primary" @click="onadd">确定</el-button>
              </div>
            </el-dialog>

          </el-form>
          <br>


          <el-table
            :data="tableData"
            border
            style="width: 100%">

            <el-table-column
              prop="name"
              label="姓名"
              width="180">
            </el-table-column>
            <el-table-column

              label="性别"
              width="100">

              <template slot-scope="scope">

                {{ scope.row.sex == 1 ? '男' : '女' }}
              </template>
            </el-table-column>

            <el-table-column
              prop="where"
              label="部门"
              width="300">

            </el-table-column>

            <el-table-column
              prop="date"
              label="入职日期"
              width="250">
            </el-table-column>
            <el-table-column
              prop="use"
              label="管理"
              width="200">

              <template slot-scope="scope">
                <el-button

                  size="mini"
                  @click="openEditDialog(scope.row)"> 编辑
                </el-button>


                <!-- Form -->

                <el-dialog
                  title="编辑"
                  :visible="dialogFormVisible"
                  @close="dialogFormVisible = false"
                  v-show="dialogFormVisible"
                  class="no-transition"
                >
                  <el-form :model="form" label-width="80px">
                    <el-form-item label="姓名">
                      <el-input v-model="form.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="部门">
                      <el-input v-model="form.where" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="入职日期">
                      <el-date-picker v-model="form.date"
                                      value-format="yyyy-MM-dd" type="date" placeholder="选择日期"
                                      :format="datePickerFormat"></el-date-picker>
                    </el-form-item>

                    <el-form-item label="性别">
                      <el-select v-model="form.sex" placeholder="请选择性别">
                        <el-option label="男" value="1"></el-option>
                        <el-option label="女" value="2"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="onSubmit">确定</el-button>
                  </div>
                </el-dialog>

                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.row.id)">删除
                </el-button>
              </template>
            </el-table-column>


          </el-table>

          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[2, 4, 6, 8]"
            :page-size=pagesize
            layout="total, sizes, prev, pager, next, jumper"
            :total=pagetotal>
          </el-pagination>
          <br><br>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import axios from 'axios';

export default {


  data() {


    return {
      pagesize:2,
      pagetotal:100,
      page:1,
      datePickerFormat: 'yyyy-MM-dd',
      tableData: [],
      searchForm: {
        name: null,
        sex: null,
        date:null,
        where: null

      },
      dialogFormVisible: false,
      dialogFormadd: false,
      form: {

        name: null,
        where: null,
        date: null,
        sex: null,


      },
      formLabelWidth: '80px'
    }

  },

  methods: {

    onsearch:function (){
      const postData2 = {
        name: this.searchForm.name,
        employeeDept: this.searchForm.where,
        sex: this.searchForm.sex,
        JoinedDate: this.searchForm.date,


      };
      axios.post("http://localhost:9000/householdManagement/Employee_search",postData2).then((result) => {
        this.tableData = result.data.data;
      })

    },
    onadd: function () {

      if (!this.form.name || !this.form.where || !this.form.date  || !this.form.sex) {
        this.$message.error('请输入完整信息');
        return;
      }
      this.dialogFormadd = false;

      const postData1 = {
        name: this.form.name,
        employeeDept: this.form.where,
        sex: this.form.sex,
        JoinedDate: this.form.date,

      };

      axios.post('http://localhost:9000/householdManagement/Employee_add', postData1)
        .then(response => {
          // 请求成功时的处理
          console.log(response.data);
          alert('新增成功');
          this.$router.go(0);
        })
        .catch(error => {
          // 请求失败时的处理
          console.error('POST请求失败', error);
          alert('新增失败');

        });

    },
    openEditDialog(row) {


      this.dialogFormVisible = true;
      this.form.id = row.id;
      this.form.name = row.name;
      this.form.where = row.employeeDept;
      this.form.date = row.JoinedDate;
      console.log(row);

    },


    onSubmit: function () {
      if (!this.form.name || !this.form.where ||  !this.form.date || !this.form.sex) {
        this.$message.error('请输入完整信息');
        return;
      }
      const postData = {
        id: this.form.id,
        name: this.form.name,
        employeeDept: this.form.where,
        sex: this.form.sex,
        JoinedDate: this.form.date

      };
      this.dialogFormadd = false;

      axios.post('http://localhost:9000/householdManagement/Employee_update', postData)
        .then(response => {
          // 请求成功时的处理
          alert('修改成功');
          this.$router.go(0);

        })
        .catch(error => {
          // 请求失败时的处理
          console.error('POST请求失败', error);
          alert('修改失败');

        });


    },
    selectPage(){
      axios.get("http://localhost:9000/householdManagement/Employee_get", {
        params: {
          pagesize: this.pagesize,
          page: this.page
        }
      })
        .then((result) => {
          this.tableData = result.data.data;
        })
        .catch((error) => {
          console.error("Error fetching data:", error);
        });
      console.log(tableData);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val;
      this.selectPage()

    },
    handleCurrentChange(val) {

      console.log(`当前页: ${val}`);
      this.page = val;
      this.selectPage()
    },
    handleEdit(index, row) {
      console.log(index, row);
    },

    handleDelete(id) {

      this.$confirm('此操作将永久删除该员工, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {

        axios.delete('http://localhost:9000/householdManagement/Employee_delete', {
            params: {
              id: id
            }
          }
        )
        this.$router.go(0);
        this.$message({
          type: 'success',
          message: '删除成功!'
        });


      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    }


  },

  mounted() {
    axios.get("http://localhost:9000/householdManagement/Employee_total", {
    })
      .then((result) => {
        this.pagetotal = result.data.data;
      })
      .catch((error) => {
        console.error("Error fetching data:", error);
      });
    this.selectPage();


  }
}

</script>
<style>
. .el-header {
  background-color: #0b8ba5;
  color: #0b8ba5;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>
